<template>
	<view>
		<view class="con" :style="{'background':bgColor,'height':height + 'px'}">
			<view class="left">
				<slot name="left"></slot>
			</view>
			<view class="center">
				<slot name="center"></slot>
			</view>
			<view class="right">
				<slot name="right"></slot>
			</view>
		</view>
		<!-- 占位符 -->
		<view class="box" :style="{'height':height + 'px'}"></view>
	</view>
</template>

<script>
	export default {
		props: {
			//背景颜色
			bgColor: {
				type: String,
				default: '#fff'
			},
			//组件高度
			height: {
				type: String,
				default: '68'
			}
		},
		created() {
			//console.log(this.bgColor)
		}
	}
</script>

<style scoped lang="scss">
	.con {
		position: fixed;
		width: 100%;
		z-index: 9;
		// height: 200rpx;
		display: flex;
		padding-top: var(--status-bar-height);

		.left,
		.right {
			width: 25%;

		}

		.center {
			width: 50%;
		}
	}

	.box {
		width: 100%;
		padding-top: var(--status-bar-height);
	}
</style>
